<template>
  <div class="app-container">
    <!-- 查询 -->
    <tl-list-search style="margin:6px 0" ref="search" :query-param="queryParam" @search="doQuery" :isDisplayDefaultSearch="false" v-if="isHeaderDisplay">
      <template slot="search">
        <el-form-item class="qryItem">
          <el-input v-model="queryParam.qry_responsible" placeholder="责任人工号或姓名" @keyup.enter.native="doQuery" ></el-input>
        </el-form-item>
        <el-form-item class="qryItem">
          <el-input v-model="queryParam.qry_taskname" placeholder="请输入任务名称" @keyup.enter.native="doQuery" ></el-input>
        </el-form-item>
        <el-form-item class="qryItem">
          <el-input v-model="queryParam.qry_milepostname" placeholder="请输入里程碑名称" @keyup.enter.native="doQuery" ></el-input>
        </el-form-item>
        <el-form-item class="qryItem">
          <el-select  v-model="taskstate" placeholder="请选择任务状态" filterable clearable multiple collapse-tags @change="concatTaskState">
            <el-option v-for="item in codeModel.mpmTaskStateList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item class="qryItem">
          <el-select  v-model="taskrisk" placeholder="请选择任务风险" filterable clearable multiple collapse-tags @change="concatTaskRisk">
            <el-option v-for="item in codeModel.taskriskList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item class="qryItem">
          <el-date-picker v-model="startandenddate" type="daterange" range-separator="至" start-placeholder="更新开始日期" end-placeholder="更新结束日期" value-format="yyyy-MM-dd" @change="changedate"></el-date-picker>
        </el-form-item>
      </template>
    </tl-list-search>
    <!-- 工具栏 -->
    <tl-list-toolbar class="tl-list-toolbar" ref="toolbar" :refMainTable="$refs.mainTable" currentModuleTableCode="mpmProjectTaskTrack/main" :startColumn="3" @add="openAddDialog('editForm')" @exportExcel="doExportExcel" :isDisplayExport="false" :isDisplayDeleteBatch="false" @deleteBatch="doDeleteBatch" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :disableDeleteBatch="selectedRowKeys.length <= 0" :isDisplayAdd="isPM">
      <template slot="left-btn">
        <el-button type="primary" @click="unfold('button')">
          <template v-if="!isFold"
            >全部展开</template
          >
          <template v-else
            >全部折叠</template
          >
        </el-button>
        <!-- <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="openAddDialog('editProjectRef')">按项目添加
        </el-button> -->
        <!-- <el-button class="filter-item" type="primary" icon="el-icon-plus" v-show="isPM" @click="openAddDialog('editProjectTaskTemplateRef')">按模板添加</el-button> -->
        <!-- <el-button class="filter-item" type="primary" icon="el-icon-download" :style="{ 'margin-left': isPM ? '' : '0' }" @click="doExportExcel" v-hasPermission="['sys:excel:export']">导出</el-button> -->
        <!-- <el-button class="filter-item" type="primary" icon="el-icon-plus" v-show="isPM" :disabled="selectedRowKeys.length <= 0" @click="deliveryBatch">批量下发</el-button> -->
      </template>
    </tl-list-toolbar>
    <div>
      <!-- 列表选择 -->
      <div class="table-alert-div" ref="selector">
        <el-alert type="success" :closable="false" class="tl-table-alert-info" effect="light">
          <template slot="title">
            已选择&nbsp;<a class="tl-table-alert-info-a1">{{ selectedRowKeys.length }}</a
            >项&nbsp;&nbsp;
            <a class="tl-table-alert-info-a2" @click="doClearSelected">全部清空</a>
          </template>
        </el-alert>
      </div>
      <!--表格渲染-->
      <el-table class="tl-table task-table" ref="mainTable" :style="{ '--tableWidth': tableWidth }" :height="tableHeight" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" :row-style="tableRowStyle" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName" @expand-change="expandChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <tl-task-expand :ref="'taskExpand' + props.row.rowno" :projectinfo="projectinfo" @refresh="doRefresh"></tl-task-expand>
            <tl-feedback-expand :ref="'feedbackExpand' + props.row.rowno" :taskInfo="props.row"></tl-feedback-expand>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <!-- <el-table-column prop="ordercode" label="序号" width="150px" sortable="custom" sort-by="ordercode" align="center"
          header-align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="milepostname" label="所属里程碑及任务" width="200px" sortable="custom" sort-by="milepostname" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="generatetaskcode" label="任务编号" width="100px" align="left" header-align="center" sortable="custom" sort-by="generatetaskcode" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="taskname" label="任务名称" width="250px" sortable="custom" sort-by="taskname" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="disptasktype" label="任务类型" width="100px" sortable="custom" sort-by="tasktype"
          align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="disptaskpriority" label="任务优先级" width="100px" sortable="custom" sort-by="taskpriority"
          align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="taskdetail" label="任务内容" width="300px" sortable="custom" sort-by="taskdetail" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="responsible" label="责任人" width="140px" sortable="custom" sort-by="responsible" align="center" header-align="center" :show-overflow-tooltip="true">
          <template v-slot="scope">
            <template v-if="scope.row.responsible !== '' && scope.row.responsible !== undefined && scope.row.responsible !== null">
              {{ scope.row.responsible + '[' + scope.row.responsiblecode + ']' }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="textstate" label="是否下发" width="100px" sortable="custom" sort-by="state" align="center" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="disptaskstateindex" label="任务状态" width="120px" sortable="custom" sort-by="taskstate" align="center" header-align="center" :show-overflow-tooltip="true">
          <template v-slot="scope">
            <el-tag :type="changeStateType(scope.row.taskstate)">
              {{ scope.row.disptaskstateindex }}
            </el-tag>
          </template>
          <template slot-scope="{}" slot="header">
            <span>任务状态</span>
            <el-popover title="任务状态" width="300" placement="top" trigger="hover">
              <span v-html="content2" style="white-space: pre-wrap"></span>
              <span slot="reference"><i class="el-icon-info" style="color: #909399"></i></span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="taskschedule" label="任务进度" width="100px" sortable="custom" sort-by="taskschedule" align="center" header-align="center" :show-overflow-tooltip="true" :formatter="percentageFormat"> </el-table-column>
        <el-table-column prop="planstartdate" label="计划开始日期" width="150px" sortable="custom" sort-by="planstartdate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="actualstartdate" label="实际开始日期" width="150px" sortable="custom" sort-by="actualstartdate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="planenddate" label="计划完成日期" width="150px" sortable="custom" sort-by="planenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="actualenddate" label="实际完成日期" width="150px" sortable="custom" sort-by="actualenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="taskdistributedate" label="任务派发日期" width="150px" sortable="custom" sort-by="taskdistributedate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="post" label="关键决策客户部门职务" width="170px" sortable="custom" sort-by="post" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="customerattach" label="客户接触现状" width="150px" sortable="custom" sort-by="customerattach" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="improveplan" label="客户关系改善计划" width="150px" sortable="custom" sort-by="improveplan" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="docno" label="单据编号" width="150px" sortable="custom" sort-by="docno" align="center"
          header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispstate" label="单据状态" width="100px" sortable="custom" sort-by="state" align="center"
          header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="latestphase" label="最新阶段" width="150px" sortable="custom" sort-by="latestphase"
          align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <!-- <el-table-column label="操作" width="100px" v-slot="scope" fixed="right">
          <el-dropdown trigger="hover">
            <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-edit" @click.native="openEditDialog('editForm', scope.row.id)" v-show="showEditButton(scope.row)">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-view" @click.native="openViewDialog('editForm', scope.row.id)">查看</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" v-show="showDeleteButton(scope.row)" @click.native="doDelete(scope.row.id)">删除</el-dropdown-item>
              <el-dropdown-item icon="el-icon-view" v-show="scope.row.taskstate !== '0'" @click.native="openViewDialog('editFeedbackList', scope.row.id)">历史进度</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit" @click.native="openAddManagerDialog('managerEditForm', scope.row)" v-if="isPM">差距与改进</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-table-column>-->
      </el-table>
      <!-- 列表分页 -->
      <el-row class="pagebar" ref="pager">
        <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-size="50" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
      </el-row>
      <tl-edit ref="editForm" @refresh="refreshForEdit" :projectinfo="projectinfo"></tl-edit>
      <tl-project ref="editProjectRef" @refresh="doRefresh" :projectCode="projectinfo.projectcode" :projectinfo="projectinfo" :isSingleSelect="false"> </tl-project>
      <tl-projecttask-template ref="editProjectTaskTemplateRef" title="选择任务模板" @refresh="doRefresh" :projectCode="projectinfo.projectcode" :projectinfo="projectinfo" :isSingleSelect="false"> </tl-projecttask-template>
      <tl-edit-Feedbacklist ref="editFeedbackList" @refresh="doRefresh"></tl-edit-Feedbacklist>
      <tl-manager-edit ref="managerEditForm"></tl-manager-edit>
    </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import { checkPermission } from '@tapui/utils/permission'
import { validateNull } from '@tapui/utils/validate'
import tlEdit from '@/views/mpm/mpmProjectTask/edit'
import tlProject from './editProjectRef'
import tlProjecttaskTemplate from './editProjectTaskTemplateRef'
import tlEditFeedbacklist from '../mpmProjectTaskFeedback/refList'
import { formatDate } from '@tapui/utils/date'
import { MPM_TASK_STATE } from '@/const/const'
import tlManagerEdit from '../mpmProjectTaskFeedback/managerEdit'
import tlTaskExpand from '../mpmProjectTask/editTaskExpand'
import tlFeedbackExpand from '../mpmProjectTaskFeedback/feedbackLineExpand'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { filterObjectNull, rmbFormat } from '@tapui/utils/util'
export default {
  name: 'mpmProjectTask',
  mixins: [mixin_list],
  components: { tlEdit, tlProject, tlProjecttaskTemplate, tlEditFeedbacklist, tlManagerEdit, tlTaskExpand, tlFeedbackExpand },
  data() {
    return {
      description: '项目任务-列表查询',
      urlPrefix: '/mpm/projectTask/',
      url: {
        list: '/mpm/projectTask/listForTrack',
        distributeTask: '/mpm/projectTask/distributeTask',
        queryCodeList: '/mpm/projectTask/dataCodeList',
        ifReviewed: '/mpm/projectReview/ifReviewed'
      },
      // 查询条件
      queryParam: {
        qry_projectcode: this.projectinfo.projectcode
      },
      // 排序参数
      sorterInfo: {
        sidx: '',
        sord: 'asc'
      },
      // 分页信息
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 50, // 每页记录数
        pageSizes: [10, 50, 100],
        totalCount: 0 // 总数
      },
      canDelete: true,
      isState: 0,
      canEdit: false,
      reduceHeight: 298,
      tableHeight: 1000,
      taskstate: [],
      tableWidth: '0px',
      expanded: [],
      startandenddate: '',
      content2: '1) 已完成关闭：已完成任务全部目标。\n2) 未完成关闭：未完成任务全部目标。\n3) 异常关闭：因特殊原因取消任务。',
      // 默认折叠
      isFold: false,
      taskrisk: []
    }
  },
  props: {
    projectinfo: {},
    projectId: {
      type: [Number, String],
      default: ''
    }
  },
  computed: {
    isPM() {
      if (this.$store.getters.projectroles) {
        return this.$store.getters.projectroles.indexOf('pm') > -1
      } else {
        return false
      }
    },
    // 编辑按钮的显示/隐藏
    showEditButton() {
      return row => {
        // 未开始、进行中的任务可编辑
        if ([MPM_TASK_STATE.notStart, MPM_TASK_STATE.inComplete].includes(row.taskstate)) {
          return true
        }
        return false
      }
    },
    // 删除按钮的显示/隐藏
    showDeleteButton() {
      return row => {
        let userCode = this.user.code
        // 只有未开始任务可删除
        if (row.taskstate === MPM_TASK_STATE.notStart) {
          // 只有项目经理、里程碑及任务责任人可删除
          if (this.projectinfo.projectmanagercode === userCode || row.milepostresponsiblecode === userCode) {
            return true
          }
        }
        return false
      }
    },
    haveExpanded() {
      return this.expanded.length > 0
    }
  },
  created() {
    window.addEventListener('resize', this.resizeHandler)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  mounted() {
    const resizeOb = new ResizeObserver(entries => {
      const tableEl = entries[0].target
      this.tableWidth = tableEl.clientWidth - 40 + 'px'
    })
    resizeOb.observe(this.$refs.mainTable.$el)
    this.$once('hook:beforeDestroy', () => {
      resizeOb.disconnect()
    })
  },
  methods: {
    refreshForEdit(dateChanged) {
      this.doRefresh()
      if (dateChanged) {
        this.$emit('refreshIndex')
      }
    },
    resizeHandler() {
      this.tableHeight = document.body.getBoundingClientRect().height - 380
    },
    /** 打开新增对话框实现，添加复盘校验 */
    openAddDialog(editForm, rowData) {
      getAction(this.url.ifReviewed, { projectcode: this.projectinfo.projectcode })
        .then(res => {
          if (res.success) {
            if (res.result) {
              this.$tap.alert('该项目已提交复盘审批，无法新增单据!')
            } else {
              if (!this.beforeOpenAddDialog(editForm, rowData)) {
                return
              }
              this.$refs[editForm].isAdd = true
              this.$refs[editForm].visible = true
              this.$refs[editForm].disableEditSubmit = false
              this.$nextTick(() => {
                this.afterOpenAddDialog(editForm, rowData)
              })
            }
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
        .catch(err => {
          this.$tap.alert(err, 'warninig')
        })
    },
    // 任务状态多选框
    concatTaskState(data) {
      if (data.length > 0) {
        this.queryParam.qry_taskstateindex = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_taskstateindex = null
      }
    },
    concatTaskRisk(data) {
      if (data.length > 0) {
        this.queryParam.qry_taskrisk = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_taskrisk = null
      }
    },
    // 任务是否发布
    afterLoadData() {
      this.datas.forEach(item => {
        if (item.state === 9) {
          item.textstate = '是'
        } else {
          item.textstate = '否'
        }
      })
      this.unfold('load')
    },
    /** 批量删除数据 */
    doDeleteBatch() {
      if (!this.url.delete) {
        this.$tap.alert('请设置delete地址!', 'warning')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$tap.alert('请选择记录！', 'warning')
        return
      } else {
        var deleteBybusinessManager = ''
        this.isState = 0
        for (var a = 0; a < this.selectionRows.length; a++) {
          if (this.selectionRows[a].state === 9 && this.selectionRows[a].taskstate === '0') {
            // state=9并且taskstate=0,表示任务已下发但是未执行
            this.isState = 1
          }
          if (this.selectionRows[a].state === 9 && this.selectionRows[a].taskstate === '1' && this.$store.getters.projectroles.indexOf('pmo') > -1) {
            // state=9并且taskstate=1,表示任务已下发并且执行
            this.isState = 2
          }
        }
        var ids = ''
        for (var index = 0; index < this.selectedRowKeys.length; index++) {
          if (index === this.selectedRowKeys.length - 1) {
            ids += this.selectedRowKeys[index]
          } else {
            ids += this.selectedRowKeys[index] + ','
          }
        }
        if (this.isState === 1) {
          this.$tap
            .confirm('删除的任务包含已下发但未执行的任务，确定删除吗？')
            .then(_ => {
              if (!this.beforeDoDelete(ids)) {
                return
              }
              deleteAction(this.url.deleteBatch, { ids: ids }).then(res => {
                if (res.success) {
                  this.$tap.message(res.message, 'success')
                  this.loadData({})
                  this.afterDoDelete(ids)
                } else {
                  this.$tap.alert(res.message, 'warning')
                }
              })
            })
            .catch(_ => {})
        } else if (this.isState === 2) {
          this.$tap
            .confirm('删除的任务包含已下发并且已执行的任务，确定删除吗？')
            .then(_ => {
              if (!this.beforeDoDelete(ids)) {
                return
              }
              deleteBybusinessManager = deleteBybusinessManager.slice(0, -1)
              deleteAction(this.url.deleteBatch, { ids: ids }).then(res => {
                if (res.success) {
                  this.$tap.message(res.message, 'success')
                  this.loadData({})
                  this.afterDoDelete(ids)
                } else {
                  this.$tap.alert(res.message, 'warning')
                }
              })
              // 当经营管理部删除已下发并已执行的任务时，需要删除对应的任务的任务反馈
              deleteAction('/mpm/projectTaskFeedback/deletecasetask', { ids: ids }).then(res => {
                if (res.success) {
                } else {
                  this.$tap.alert(res.message, 'warning')
                }
              })
            })
            .catch(_ => {})
        } else {
          this.$tap
            .confirm('确定删除数据吗？')
            .then(_ => {
              if (!this.beforeDoDelete(ids)) {
                return
              }
              deleteAction(this.url.deleteBatch, { ids: ids }).then(res => {
                if (res.success) {
                  this.$tap.message(res.message, 'success')
                  this.loadData({})
                  this.afterDoDelete(ids)
                } else {
                  this.$tap.alert(res.message, 'warning')
                }
              })
            })
            .catch(_ => {})
        }
      }
    },
    deliveryBatch() {
      if (this.selectedRowKeys.length <= 0) {
        this.$tap.alert('请选择数据', 'warning')
        return
      } else {
        this.$tap
          .confirm('确定批量下发吗？')
          .then(_ => {
            putAction(this.url.distributeTask, { idlist: this.selectedRowKeys }).then(res => {
              if (res.success) {
                this.$tap.message(res.message, 'success')
                this.loadData({})
              } else {
                this.$tap.alert(res.message, 'warning')
              }
            })
          })
          .catch(_ => {})
      }
    },
    /** 表格双击事件 */
    doRowDbClick(row, column, event) {
      if ([MPM_TASK_STATE.notStart, MPM_TASK_STATE.inComplete].includes(row.taskstate) && (this.user.code === this.projectinfo.projectmanagercode || this.user.code === row.responsiblecode)) {
        this.openEditDialog('editForm', row[this.$refs.mainTable.rowKey])
      } else {
        this.openViewDialog('editForm', row[this.$refs.mainTable.rowKey])
      }
    },
    // 禁用表格前面的选择（用于批量下发）
    doDisableCheckBox(row, index) {
      // 只有未下发任务可勾选
      return row.state === 0
    },
    /** 格式化任务进度 */
    percentageFormat(row, column, cellValue, index) {
      let taskScheduleValue = row[column.property]
      if (typeof taskScheduleValue === 'undefined' || taskScheduleValue === null || taskScheduleValue === '') {
        return '0%'
      }
      taskScheduleValue = taskScheduleValue + '%'
      return taskScheduleValue
    },
    /** 改变任务状态标签颜色 */
    changeStateType(state) {
      return state === '0' ? 'info' : state === '-1' ? 'danger' : state === '2' ? 'success' : ''
    },
    // 行颜色
    tableRowStyle(row, index) {
      // 如果计划完成时间为空，则行颜色为空
      if (row.row.planenddate === undefined || row.row.planenddate === null || row.row.planenddate === '' || (row.row.taskstate !== MPM_TASK_STATE.notStart && row.row.taskstate !== MPM_TASK_STATE.inComplete)) {
        return {}
      } else {
        let taskState = row.row.taskstate
        let state = row.row.state
        let currentTime = new Date()
        // 替换字符 变为标准格式
        let customTime = formatDate(new Date(row.row.planenddate.replace(new RegExp(/-/gm), '/')), 'yyyy-MM-dd 23:59:59')
        customTime = new Date(Date.parse(customTime))
        // 如果当前时间 > 计划达成日期
        if (currentTime > customTime && [MPM_TASK_STATE.notStart, MPM_TASK_STATE.inComplete].includes(taskState) && state === 9) {
          return { 'background-color': '#d80a1e', color: '#FFFFFF' }
        //   return { 'background-color': '#B8860B', color: '#FFFFFF' }
        }
      }
    },
    /** 打开差距与改进新增对话框 */
    openAddManagerDialog(editForm, rowData) {
      this.$refs[editForm].isAdd = true
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = false
      this.$refs[editForm].taskInfo = rowData
    },
    // 打开任务下拉框
    expandChange(row, expandedRows) {
      this.expanded = expandedRows
      // 若为折叠 直接返回
      if (!expandedRows.indexOf(row) < -1) {
        return
      }
      // 显示任务页面
      let editForm = 'taskExpand' + row.rowno

      this.$nextTick(_ => {
        if (this.$refs[editForm]) {
          this.$refs[editForm].isAdd = false
          this.$refs[editForm].visible = true
          this.$refs[editForm].disableEditSubmit = true
          this.$refs[editForm].id = row.id
          this.$refs[editForm].open()
        }
      })
      // 显示任务反馈页面
      let editFormFeedback = 'feedbackExpand' + row.rowno
      this.$nextTick(_ => {
        if (this.$refs[editFormFeedback]) {
          this.$refs[editFormFeedback].isAdd = false
          this.$refs[editFormFeedback].visible = true
          this.$refs[editFormFeedback].disableEditSubmit = true
          this.$refs[editFormFeedback].id = row.id
          this.$refs[editFormFeedback].open()
        }
      })
      this.$nextTick(() => {
        this.scrollToRow(row)
      })
    },
    // 点击一键展开/折叠
    unfold(type) {
      // 点击按钮进行切换,按钮名称变化
      if (type === 'button') {
        this.isFold = !this.isFold
      }
      this.$nextTick(() => {
        let table = this.$refs.mainTable
        table.data.forEach(item => {
          table.toggleRowExpansion(item, this.isFold)
        })
        this.$nextTick(() => {
          this.scrollTableToTop()
        })
      })
    },
    changedate(data) {
      if (validateNull(data)) {
        this.queryParam.qry_startdate = null
        this.queryParam.qry_enddate = null
      } else {
        this.queryParam.qry_startdate = data[0]
        this.queryParam.qry_enddate = data[1]
      }
    },
    // 滚动到表格头部
    scrollTableToTop() {
      let rows = this.$refs.mainTable.$el.getElementsByClassName('el-table__row')
      rows = Array.prototype.slice.call(rows)
      if (rows && rows.length > 0) {
        rows[0].scrollIntoView()
      }
    },
    // 滚动到指定的行
    scrollToRow(row) {
      let index = this.datas.indexOf(row)
      // 定位到row 调用scrollIntoView
      let expandComp = Array.prototype.slice.call(this.$refs.mainTable.$el.getElementsByClassName('el-table__row'))
      expandComp[index].scrollIntoView()
    }
  }
}
</script>

<style lang="scss" scoped>
$small:600px;
$medium:1380px;
$large:1600px;
.app-container {
  margin: 0;
}
.tl-table /deep/ .el-table__body-wrapper {
  overflow-y: auto;
}
.app-container /deep/ .el-table tbody tr:hover > td {
  background-color: transparent !important;
}
/deep/ .tl-table.el-table.el-table--mini tr.el-table__row > td {
  height: 32px;
}
//对于展开的任务列表 底色淡灰
.tl-table.el-table /deep/ .expanded {
  background-color: rgba(163, 162, 162, 0.4);
}
/deep/ .qryItem{
  @media screen and (max-width:$medium) {
      margin-right:10px ;
    .el-input{
      width: 95% !important;
    }
    .el-date-editor{
      width:300px;
      .el-range-separator{
        overflow: visible;
        z-index: 50;
      }
    }
    .el-input__inner{
      font-size: 12px;
    }
  }
  @media screen and (min-width:$large) {
    margin-right:15px ;
    .el-input{
      width: 100% !important;
    }
    .el-date-editor{
      width:350px;
      .el-range-separator{
        overflow: visible;
        z-index: 50;
      }
    }
    .el-input__inner{
      font-size: 14px;
    }
  }
}
</style>
